<template>
  <div>
    <div v-for="art in articles" :key="art.articleId">
      <el-row :gutter="20">
        <el-col :span="4" v-if="art.thumbnail && art.thumbnail.length > 0">
          <el-image style="width: 100%" :src="picUrl + art.thumbnail" fit="fill"></el-image>
        </el-col>
        <el-col :span="art.thumbnail && art.thumbnail.length > 0 ? 20 : 24">
          <el-descriptions :column="2">
            <template #title>
              <h1 style="cursor: pointer;" @click="toArticle(art.articleId)">{{ art.title }}</h1>
            </template>
            <el-descriptions-item :span="2">{{ art.summary }}</el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <el-icon>
                  <calendar />
                </el-icon>
              </template>
              {{ art.createTime }}
            </el-descriptions-item>
            <el-descriptions-item v-if="art.tags && art.tags.length > 0">
              <template #label>
                <el-icon>
                  <collection-tag />
                </el-icon>
              </template>
              <tags-wall :tags="art.tags"></tags-wall>
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>
      <el-divider></el-divider>
    </div>
    <el-pagination
      layout="prev, pager, next"
      :page-size="pageSize"
      :total="total"
      :hide-on-single-page="true"
      v-model:currentPage="current"
      @current-change="handleCurrentChange"
    ></el-pagination>
  </div>
</template>

<script lang="ts" setup>
import type { Article, Tag, Tree } from '@/api/type'
import { inject, onMounted, ref, watch } from 'vue'
import { getPageArticles } from '@/api/request'
import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router'

const props = defineProps<{
  tagName?: string
}>()

const qParam = ref(inject('qParam'))

const pageSize = ref(5)

const articles = ref<Article[]>()

const tagName = ref(props.tagName)

const total = ref(0)

const current = ref(1)

const classifyId = ref(0)

const route = useRoute()

const router = useRouter()

const picUrl = import.meta.env.VITE_SERVICE_BASE_URL

onMounted(() => {
  if (route.params.pid) {
    classifyId.value = Number(route.params.pid)
  }
  if (route.params.name) {
    tagName.value = String(route.params.name)
  }
  loadPageArticle()
})

onBeforeRouteUpdate(to => {
  if (to.params.pid) {
    classifyId.value = Number(to.params.pid)
  }
  if (to.params.name) {
    tagName.value = String(to.params.name)
  }
  loadPageArticle()
})

watch(qParam, (qParam, prevCount) => {
  loadPageArticle()
})

const toArticle = (articleId: number) => {
  router.push({ path: '/content/' + articleId })
}

const loadPageArticle = async () => {
  const articlePage = await getPageArticles({ queryParam: qParam.value, tagName: tagName.value, current: current.value, classifyId: classifyId.value })
  articles.value = articlePage.records
  articles.value.map(article => {
    if (article.tags && typeof article.tags === 'string') {
      article.tags = article.tags.split(',').map((tag): Tag => {
        return {
          tagId: undefined,
          name: tag
        }
      })
    }
  })
  total.value = articlePage.total
}

const handleCurrentChange = (val: number) => {
  current.value = val
  loadPageArticle()
}

const selectNode = (data: Tree) => {
  classifyId.value = Number(data)
  loadPageArticle()
}

defineExpose({
  selectNode
})
</script>

<style lang="less" scoped>
</style>
